<template>
  <div class="absenceRequest">
    <h1 style="text-align: center;font-size: 24px;margin-top: 60px;">请（休）假申请表</h1>
    <el-form :data="ruleForm" label-width="100px" class="demo-ruleForm" ref="ruleForm" style="margin-top: 30px;">
      <div style="margin-left: 30px">
        <h2 style="margin-bottom:20px;">部门信息：</h2>
        <el-form-item label="所属部门" prop="organization">
          <el-input v-model="ruleForm.organization"></el-input>
        </el-form-item>
        <el-form-item label="所在科室" prop="department">
          <el-input v-model="ruleForm.department"></el-input>
        </el-form-item>
        <el-form-item label="职务/岗位" prop="jobs">
          <el-input v-model="ruleForm.jobs"></el-input>
        </el-form-item>
      </div>
      <div style="margin-left: 30px">
        <h2 style="margin-bottom:20px;">个人基本信息:</h2>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="出生年月" prop="age">
          <el-input v-model="ruleForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-input v-model="ruleForm.gender"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="gender">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
      </div>
      <div style="margin-left: 30px">
        <h2 style="margin-bottom:20px;">请（休）假类别:</h2>
        <el-radio-group v-model="ruleForm.category">
          <el-radio label="公假" border value="公假"></el-radio>
          <el-radio label="婚假" border value="婚假"></el-radio>
          <el-radio label="丧假" border value="丧假"></el-radio>
          <el-radio label="产假" border value="产假"></el-radio>
          <el-radio label="年假" border value="年假"></el-radio>
          <el-radio label="探亲假" border value="探亲假"></el-radio>
          <el-radio label="病假" border value="病假"></el-radio>
          <el-radio label="其他" border value="其他"></el-radio>
        </el-radio-group>
      </div>
      <div style="margin-left: 30px">
        <h2 style="margin:20px 0;">请（休）假详情:</h2>
        <el-form-item label="原因" prop="reason">
          <el-input type="textarea" v-model="ruleForm.reason" maxlength="10" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="请假时间" prop="absenceTime" class="demonstration" :rules="rules">
          <el-date-picker v-model="ruleForm.absenceTime" type="daterange" placeholder="选择日期"
                          :picker-options="pickerOptions" start-placeholder="开始日期"
                          end-placeholder="结束日期" @blur="count">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="天数" prop="totalTime">
          <el-input v-model="ruleForm.totalTime"></el-input>
        </el-form-item>
      </div>
      <div style="margin-left: 30px">
        <h2 style="margin-bottom:20px;">审核意见:</h2>
        <el-form-item label="管理员签字" prop="departmentManager">
          <el-input v-model="ruleForm.departmentManager" readonly></el-input>
        </el-form-item>
        <el-form-item label="院长签字" prop="director">
          <el-input v-model="ruleForm.director" readonly></el-input>
        </el-form-item>
        <span>注:     提交成功后等待审核签字通过</span>
      </div>
      <div style="margin-left: 30px">
        <el-form-item class="center">
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <!--           <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          <el-button @click="offReset">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script type="text/ecmascript-6">
import router from "../../router";
// import settings from "@/assets/js/settings";

export default {
  data() {
    return {
      ruleForm: {
        organization: '',
        department: '',
        jobs: '',
        name: '',
        age: '',
        gender: '',
        category: [],
        reason: '',
        absenceTime: '',
        totalTime: '',
        departmentManager: '',
        director: '',
        start_time: '',
        mobile: '',
      },
      rules: {
        absenceTime: [
          {
            type: 'array',
            required: true,
            message: '请选择日期区间',
            fields: {
              //tpye类型试情况而定,所以如果返回的是date就改成date
              0: {type: 'string', required: true, message: '请选择开始日期'},
              1: {type: 'string', required: true, message: '请选择结束日期'}
            }
          }
        ]
      },
    };
  },
  // created() {
  //   let user_id = this.$getSessionStorage('user_id')
  //   // 发送请求向后端获取到当前登录用户的信息
  //   this.$axios.get(this.$settings.BASE_URL + `user/get_user/${user_id}`).then(response => {
  //     console.log(response.data)
  //     this.ruleForm.organization = response.data.department.depart_type_name
  //     this.ruleForm.department = response.data.department.name
  //     this.ruleForm.jobs = this.$getSessionStorage('user_type')
  //     this.ruleForm.name = response.data.name
  //     this.ruleForm.age = response.data.data_birth
  //     this.ruleForm.gender = response.data.gender_name
  //     this.ruleForm.mobile = response.data.mobile
  //   })
  // },
  methods: {
    // 2022-11-30 0:0:0
    daysBetween(start_time, end_time) {
      var day = 0
      var OneMonth = start_time.substring(5, start_time.lastIndexOf('-'));
      var OneDay = start_time.substring(start_time.length, start_time.lastIndexOf('-') + 1);
      var start_day = Number(OneDay.substring(0, OneDay.indexOf(' ')))
      // var OneYear = start_time.substring(0, start_time.indexOf('-'));
      //
      var TwoMonth = end_time.substring(5, end_time.lastIndexOf('-'));
      var TwoDay = end_time.substring(end_time.length, end_time.lastIndexOf('-') + 1);
      var end_day = Number(TwoDay.substring(0, TwoDay.indexOf(' ')))
      // var TwoYear = end_time.substring(0, end_time.indexOf('-'));
      console.log(start_day, end_day)
      if (TwoMonth == OneMonth) {
        day = end_day - start_day
      } else {
        let end = end_day + 30
        day = end - start_day
      }
      return day
    },
    count() {
      var d = new Date(this.ruleForm.absenceTime[0]);
      let start_time = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
      this.ruleForm.start_time = start_time
      var d2 = new Date(this.ruleForm.absenceTime[1]);
      let end_time = d2.getFullYear() + '-' + (d2.getMonth() + 1) + '-' + d2.getDate() + ' ' + d2.getHours() + ':' + d2.getMinutes() + ':' + d2.getSeconds()
      let a = this.daysBetween(start_time, end_time)
      this.ruleForm.totalTime = a
    },
    onSubmit() {
      // 提交前端的数据
      // this.$axios.post(this.$settings.BASE_URL + 'system/leave/', {
      // this.$axios.post(this.$settings.BASE_URL + 'leaveplatform/leave/', {
      // this.$axios.post(this.$settings.BASE_URL + 'leaveplatform/leave/post/', {
      this.$axios.post(`${this.$settings.BASE_URL}leaveplatform/leave/post/`, {
      // this.$axios.post(`${this.$settings.BASE_URLS}leaveplatform/kl/`, {
      // this.$axios.post('http://127.0.0.1:8000/api/vi/leaveplatform/kl/', {
        name: this.ruleForm.name,
        data_birth: this.ruleForm.age,
        gender: this.ruleForm.gender,
        department_name: this.ruleForm.department,
        department_type: this.ruleForm.organization,
        job: this.ruleForm.jobs,
        leave_category: this.ruleForm.category,
        leave_reason: this.ruleForm.reason,
        start_time: this.ruleForm.start_time,
        leave_days: this.ruleForm.totalTime,
        mobile: this.ruleForm.mobile,
      }).then(response => {
        console.log(this.ruleForm.name)

        this.$message({
          message: '请假单提交成功，请等待批准',
          type: 'success',
          duration: 1000
        })
        if (this.user_type === '管理员') {
          window.setTimeout(function () {
            router.push({path: '/index/leaveManage'})
          }, 1000)
        } else {
          this.offReset()
        }
      })
    },
    offReset() {
      this.ruleForm.category = ''
      this.ruleForm.reason = ''
      this.ruleForm.absenceTime = ''
      this.ruleForm.totalTime = ''
    },

    pickerOptions() {
      return {
      disabledDate(time) {
        return time.getTime() < Date.now - 8.64e7;
      }
      }
    },
    // pickerOptions: {
    //   disabledDate(time) {
    //     return time.getTime() < Date.now - 8.64e7;
    //   }
    // },
  }
};
</script>
<style type="text/css">
.absenceRequest .el-input, .absenceRequest .el-input__inner {
  width: 170px;
  display: inline-block;
}

.absenceRequest .el-form-item {
  margin-bottom: 22px;
  margin-right: 50px;
  display: inline-block;
}

.absenceRequest .el-checkbox, .absenceRequest .el-checkbox__input {
  cursor: pointer;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  margin-left: 29px;
}

.absenceRequest .center {
  padding-left: 300px;
  margin-top: 50px;
}
</style>